/**
 * @file
 * @auth jinguangguo
 * @date 2016/10/18
 */

/*
 * 布局函数
 */
@mixin layoutContent($width, $height) {

    min-height: 100%;
    margin-top: -$height;

    .layout-wrapper-box {
        padding-top: $height;
        .layout-loading {
            padding-top: 200px;
            text-align: center;
        }
        .layout-header {
            height: 28px;
            background-color: #282828;
        }
        .layout-content {
            width: $width;
            margin: 16px auto;
            background-color: #fff;
            &-box {
                //padding: 40px 32px;
                //background-color: #14191c;
                //@include shadow;
                //&:last-child {
                //    margin-bottom: 0;
                //}
            }
        }

        .layout-body {
            display: flex;
            padding-top: $height-nav;
            .layout-body-nav {
                flex: 0 0 372px;
                width: 372px;
                min-height: $height-left-nav-min;
            }
            .layout-body-module {
                flex: 1;
                margin-left: 2px;
            }
        }

        // 用于新版 - account账户页面
        .layout-container {
            display: flex;
            //margin: 3px 0 4px 0;
            padding-top: $height-nav;
            //border-bottom: 2px solid  #0c1113;
            .layout-container-aside {
                flex: 0 0 256px;
                width: 256px;
                min-height: $height-left-nav-min;
                background-color: #fff;
                padding-top: 16px;
                box-shadow: 0 0 32px #e2e2e2;
                margin: 24px 0;
                .aside-box {

                }
            }
            .layout-container-module {
                flex: 1;
                padding-top: 24px;
                //background-color: #fff;
                //box-shadow: 0 0 120px #e2e2e2;
                .module-box {
                    margin-left: 24px;
                    //background-color: #fff;
                    //box-shadow: 0 0 120px #e2e2e2;
                    //padding: 24px;
                    //border-radius: 4px;
                }
            }
        }

        // this is new begin
        .layout-market {
            .col-left, .col-right {
                height: 100%;
                background-color: $color-bg-light;
                flex-grow: 1;
            }
            .col-left {
                flex: 1;
                margin-right: 2px;
            }
            .col-right {
                flex: 0 0 580px;
                width: 580px;
            }
            // 中间大布局
            .layout-md {
                display: flex;
            }
            // 底部大布局
            .layout-ft {
                box-sizing: border-box;
                display: flex;
                position: fixed;
                width: 100%;
                bottom: 0;
                height: 246px;
                //border-bottom: 2px $color-bg solid;
            }
        }

    }
}

/*
    $layout-width
*/

.layout-wrapper {
    @include layoutContent($layout-width, $layout-footer-height);
}

.layout-wrapper-simple {
    overflow: hidden;
    @include layoutContent($layout-width, $layout-footer-height-simple);
}

.layout-wrapper-web {
    overflow: hidden;
    @include layoutContent($layout-width, $layout-footer-height-simple);
    .layout-wrapper-box {
        padding-top: 0;
    }
}

.layout-normal {
    width: $layout-width;
    margin: 0 auto;
}

// 站外
.layout-web {
    padding-top: 160px;
    text-align: center;
}

.layout-center {
    //position: fixed;
    //top: 40%;
    //left: 50%;
    //transform: translate(-50%, -50%);
    //z-index: 2;
    margin: 0 auto;
    padding-top: 120px;
}
